<template>
	<view class="container" style="overflow: hidden;">
		<view class="hot_topic sort" style="">
			<view class="title flex_between" style="">
				<view class="title_inner">热门话题</view>
				<view class="opt_box flex">
					<view class="opt" @click="myarticle">我的帖子</view>
					<view class="opt" @click="shoucnag">我的收藏</view>
					<view class="opt" @click="guanzhu">我的关注</view>
				</view>
			</view>
			<view class="hot_topic_sort flex">
			  <view
			    class="sort_item"
			    v-for="topic in topics"
			    :key="topic.title"
			    style="overflow: hidden;position: relative;z-index: 0;"
			    @click="huatiList(topic.id)"
			  >
			    <view class="text" style="position: absolute;z-index: 1;"></view>
			    <image :src="topic.image" mode="" style="width: 220rpx;height: 120rpx;"></image>
			  </view>
			</view>


		</view>
<!-- 		<view class="top" style="height: 280rpx;width: 100%;z-index:2">		
		</view> -->
		<view class="hot_forum sort"  style="">
			<view class="title">热门论坛</view>
			<scroll-view class="content" >
				<view class="list" scroll-y style="">
					<view class="item" v-for="(item,index) in ListData" :key='index'>
						<view class="header flex">
							<image class="avatar" :src="item.member_info.avatar" @click="toUser(item.member_id,$event)"></image>
							<view class="username" style="max-width: 310rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{item.member_info.name}}</view>
							<view class="time">{{item.createtime }}</view>

							<view @click='guanzhuList(item.member_id,item.friends_status)' class="focus flex_center">
								{{item.friends_status}}
							</view>
							
						</view>
						<view class="inner" >
							<view class="detail el4" style="font-weight: 700;" @click="topicDetail(item.id,$event)">
								{{item.title}}
							</view>
							<view class="detail el4" @click="topicDetail(item.id,$event)">
								{{item.content}}
							</view>
							<view class="opt flex_between">
								<view class="flex">
									<view class="flex">
									  <image v-if="item.zan_num === 0" src="../../static/image/forum/dianzan.png"></image>
									  <image v-else src="../../static/image/forum/dianzan1.png"></image>
									  <text class="num">{{item.zan_num}}</text>
									</view>
									<view class="flex" @click="topicDetail(item.id,$event)">
										<image src="../../static/image/forum/pinglun.png"></image>
										<text class="num">{{item.comment_num }}</text>
									</view>
									<view class="flex" @click="share(item)">
										<image src="../../static/image/forum/fenxiang.png" @click="refresh"></image>
										<text class="num">{{item.share_num }}</text>
									</view>
								</view>
								<view class="more" @click="topicDetail(item.id,$event)">
									<image src="../../static/image/forum/gengduo.png"></image>
								</view>
							</view>
						</view>
					</view>
				    
				</view>
			</scroll-view>
		</view>
		<view class="send flex_center">
			<image class="img" src="../../static/image/forum/bz.png" @click="article"></image>
		</view>
	</view>
</template>

<script>
	import {
		get_gushis_list,
		guanzhu_list,
		huati_list,
		guanzhu_status,
		zanshare,
		deletestoryAPI
	} from "@/api/api.js"
	export default {
		data() {
			return {
				topics: [],
				ListData: [],
				value1: 1,
				tabList: [{
						labelText: '首页',
						url: '/pages/tabbar/home',
						iconPath: '/static/image/tabbar/tabbar1.png',
						activeIconPath: '/static/image/tabbar/activetabbar1.png'
					},
					{
						labelText: '论坛',
						url: '/pages/tabbar/forum',
						iconPath: '/static/image/tabbar/tabbar2.png',
						activeIconPath: '/static/image/tabbar/activetabbar2.png'

						// activeIconPath: '/static/image/tabbar/activetabbar2.png'
					},
					{
						labelText: '客服',
						url: '/pages/tabbar/service',
						iconPath: '/static/image/tabbar/tabbar3.png',
						activeIconPath: '/static/image/tabbar/activetabbar3.png'
					},
					{
						labelText: '我的',
						url: '/pages/tabbar/mine',
						iconPath: '/static/image/tabbar/tabbar4@3x.png',
						activeIconPath: '/static/image/tabbar/activetabbar4@3x.png'
					}
				],
			    filteredTopics: [],
				huati_id: null,
				currentPage: 1, // 当前页数
				pageSize: 5,   // 每页数据量
			};
		},
		methods: {
			//故事详情9
			topicDetail(id, e) {
				uni.navigateTo({
					url: `/pages/story/storydetails?id=${id}`
				})
			},

			toUser( id , e) {				
				uni.navigateTo({
					url: `/pages/userInfo/userInfo?id=${id}`
				})
			},
			async huatiList(huati_id) {
			  try {
			    const response = await huati_list();
			    this.topics = response.data.data.data;
			    this.huati_id = huati_id;
			    console.log(this.topics, "话题");
			    // 根据 huati_id 调用 getGushisList 方法
			    this.getGushisList();
			  } catch (error) {
			    uni.showToast({
			      title: error,
			      icon: 'none',
			      duration: 2000,
			    });
			  }
			},

            /* 关注 */
async guanzhuList(id, type) {
    const params = {
        to_member_id: id,
        type: 0
    };
    try {
        type === '未关注' ? params.type = 0 : params.type = 1;
        const response = await guanzhu_list(params);
        this.getGushisList()
        uni.showToast({
            title: response.data.msg,
            icon: 'success',
            duration: 2000
        });
    } catch (error) {
        uni.showToast({
            title: error,
            icon: 'none',
            duration: 2000
        });
    }
},

			async getGushisList() {
			  const params = {
			    clsss: 1,
			    huati_id: this.huati_id,  // 将 huati_id 作为参数传递
				page: this.currentPage,  // 传递当前页数
				pageSize: this.pageSize
			  };
			
			  try {
			    const response = await get_gushis_list(params);
			    console.log('信息', response.data.data.rows);
			    this.ListData = response.data.data.rows;
				 //const newData = response.data.data.rows;
				if (newData && newData.length > 0) {
				        this.ListData = this.ListData.concat(newData);
				        this.currentPage++;  // 增加当前页数
				      } else {
				        // 没有新数据，可能已经加载完全部数据，你可以根据实际情况处理
				        console.log('No More Data');
				    }
			  } catch (error) {
			     uni.showToast({
			      title: error,
			      icon: 'none',
			      duration: 2000,
			    }); 
			  }
			},
						   			
             /* 分享 */
           async share(item) {
             const params = {
               gushi_id: item.id,
               type: 3,
               kind: 0
             };            
             try {
               const response = await zanshare(params);
               // 获取当前页面路径
               const pages = getCurrentPages();
               const currentPage = pages[pages.length - 1];
               const currentPath = `/${currentPage.route}`;     
               // 构建详情页路径
               const detailPath = `/pages/story/storydetails?id=${item.id}`;           
               // 复制到剪贴板
               uni.setClipboardData({
                 data: currentPath + detailPath,
                 success: () => {
                   // 复制成功后进行无痕刷新
                   
                   uni.showToast({
                     title: '复制链接成功',
                     icon: 'success',
                    // duration: 2000
                   });
				   
                 }
               });             
               console.log('分享');
             } catch (error) {
               uni.showToast({
                 title: error,
                 icon: 'none',
                 duration: 2000
               });
             }			  
           },
           refresh(){
			 this.getGushisList();  
		   },
			
			change1(e) {
				console.log(e);
				uni.switchTab({
					url: this.tabList[e].url
				})
			},
			navigatorTo({
				index
			}) {},
			article() {
				uni.navigateTo({
					url: '/pages/story/story'
				})
			},
			myarticle() {
				uni.navigateTo({
					url: '/pages/story/mystory'
				})
			},
			shoucnag() {
				uni.navigateTo({
					url: '/pages/shoucang/shoucang'
				})
			},
			guanzhu(){
				uni.navigateTo({
					url: '/pages/guanzhu/guanzhu'
				})
			},
			/* scrollBottom() {
				console.log("滚动到底部了")
				this.currentPage++
				this.getGushisList()
			} */

		},
		onShow() {
			  this.getGushisList();
			  this.huatiList();
		},
		onHide() {}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		background-image: url('../../static/image/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: var(--status-bar-height);
		padding-bottom: 0;
		display: flex;
		flex-direction: column;

		.sort {
			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}
		}


		.hot_topic {
			padding: 32rpx 32rpx 48rpx;

			.title {
				.opt {
					padding: 12rpx 24rpx;
					background: #275515;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					margin-left: 8rpx;
				}
			}

			.hot_topic_sort {
				margin-top: 32rpx;

				.sort_item {
					flex: 1;
					height: 120rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 24rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 120rpx;
					text-align: center;

					&:nth-child(2) {
						margin: 0 28rpx;
					}
				}

			}
		}

		.hot_forum {
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;

			.title {
				padding: 0 32rpx 24rpx;
			}

			.content {
				width: 100%;
				//flex: 1;
				height: 100%;
				overflow: auto;
				background: url("../../static/image/forum/bg.png") no-repeat 100%;
				background-position: bottom right;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;

				.list {
					height: calc(100vh - 440rpx);
					flex: 1;
					overflow-y: auto;
					.item {
						width: 100%;
						border-bottom: 2rpx solid #f5f5f5;
						padding: 32rpx;
						box-sizing: border-box;

						.header {
							.avatar {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}

							.username {
								margin: 0 16rpx;
								font-size: 32rpx;
								font-weight: 500;
								color: #333333;
								line-height: 44rpx;
							}

							.time {
								font-size: 20rpx;
								font-weight: 400;
								color: #9EA7B6;
								line-height: 28rpx;
							}

							.focus {
								width: 96rpx;
								height: 40rpx;
								border-radius: 40rpx;
								border: 2rpx solid #275515;
								font-size: 20rpx;
								color: #275515;
								line-height: 28rpx;
								margin: 0 0 0 auto;
							}
						}

						.inner {
							padding-left: 76rpx;
							margin-top: 16rpx;

							.detail {
								font-size: 24rpx;
								font-weight: 400;
								color: #333333;
								line-height: 34rpx;
							}

							.img_list {
								margin-top: 16rpx;

								.img_item {
									width: 240rpx;
									height: 200rpx;
									border-radius: 24rpx;
									margin-left: 16rpx;

									&:nth-child(1) {
										margin-left: 0;
									}
								}
							}

							.opt {
								margin-top: 32rpx;

								uni-image {
									width: 28rpx;
									height: 28rpx;
								}

								.num {
									margin: 0 48rpx 0 8rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #7C8491;
									line-height: 40rpx;
								}
							}
						}
					}
				}
			}
		}

		.send {
			position: fixed;
			bottom: 48rpx;
			right: 0;

			.img {
				width: 236rpx;
				height: 236rpx;
			}
		}
	}

	img {
		width: 100%;
		height: 100%;
	}

	::v-deep .u-page__item__slot-icon {
		position: relative;
		display: inline-block;
		margin-top: 10rpx;
	}

	::v-deep .u-tabbar-item__text {
		font-size: 10px;
		line-height: normal;
		margin-top: 3px;
	}

	.u-page__item__slot-icon {
		width: 48rpx;
		height: 48rpx;
	}
</style>